<template>
  <div class="container">
    <ActionBar @setting-click="settingDialogVisible = true" />
    <List
      v-if="commonlyFlow.processDefinitions.length"
      :data="commonlyFlow"
      @item-click="handleItemClick"
    />
    <List v-for="item of typeList" :key="item.typeId" :data="item" @item-click="handleItemClick" />
    <SettingDiglog
      :show.sync="settingDialogVisible"
      :data="typeList"
      :check="checkList"
      @success="getCommonlyFlowList"
    />
    <FormDiglog :show.sync="formDialogVisible" :data="processDefinition" />
  </div>
</template>

<script>
import ActionBar from './components/ActionBar'
import List from './components/List'
import SettingDiglog from './components/SettingDiglog'
import FormDiglog from './components/FormDiglog'
import FlowTypeService from '../../../service/flow_type'
import WorkOrderApplyService from '../../../service/work_order_apply'

export default {
  components: {
    ActionBar,
    List,
    SettingDiglog,
    FormDiglog
  },
  data() {
    return {
      settingDialogVisible: false,
      formDialogVisible: false,
      processDefinition: {},
      typeList: [],
      commonlyFlow: {
        typeName: '常用流程',
        processDefinitions: []
      }
    }
  },
  mounted() {
    this.getTypeList()
    this.getCommonlyFlowList()
  },
  computed: {
    checkList() {
      return this.commonlyFlow.processDefinitions.map(item => item.key)
    }
  },
  methods: {
    getTypeList() {
      FlowTypeService.getTypeListAndProcessDefinitionAll().then(res => {
        this.typeList = res.data
      })
    },
    getCommonlyFlowList() {
      WorkOrderApplyService.getCommonlyFlowList().then(res => {
        this.commonlyFlow.processDefinitions = res.data
      })
    },
    handleItemClick(value) {
      if (value.flowInfo.form) {
        this.processDefinition = value
        this.formDialogVisible = true
      } else {
        this.$message.warning('请先绑定表单')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  padding 20px
  box-sizing border-box
</style>
